<template>
  <div>
    <div class="flex justify-between items-center pr-4 py-2 bg-white">
      <LayoutBreadcrumb class="grow" />
      <div>
        <a-input v-model:value="keyword" style="width: 350px" placeholder="请输入检测关键字" />
        <a-button type="primary" class="mx-4" @click="fetch">查询</a-button>
      </div>
    </div>
    <!--    <div class="text-right mt-2 bg-white p-2">-->
    <!--      <a-input v-model:value="keyword" style="width: 350px" placeholder="请输入检测关键字" />-->
    <!--      <a-button type="primary" class="mx-4">查询</a-button>-->

    <!--    </div>-->
    <div class="mt-2 px-4 pb-4 bg-white">
      <this-table ref="table" @on-add="onAddUser" @on-edit="onEditUser" @on-role="onEditRole" @on-user-permis="onEditUserPermis" @on-project-permis="onEditProjectPermis" />
    </div>

    <userEdit ref="userE" @edited="fetch" />
    <userAdd ref="userA" @added="fetch" />
    <roleModal ref="roleM" @updated="fetch" />
    <userPermisModal ref="userPermis" />
    <projectPermisModal ref="projectPermis" />
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { LayoutBreadcrumb } from '../../../layouts/default/header/components';
import { ref } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import thisTable from './table.vue';
import userEdit from './user/edit.vue';
import userAdd from './user/add.vue';
import roleModal from './role/edit.vue';
import userPermisModal from './userpermis/edit.vue';
import projectPermisModal from './projectpermis/edit.vue';
// import { defHttp } from '/@/utils/http/axios';

export default defineComponent({
  components: { LayoutBreadcrumb, PlusOutlined, thisTable, userEdit, roleModal, userAdd,userPermisModal,projectPermisModal},
  setup() {
    const keyword = ref('');
    const userE = ref();
    const userA = ref();
    const roleM = ref();
    const table = ref();
    const userPermis = ref();
    const projectPermis = ref();
    const onAddUser = () => {
      userA.value.open();
    };



    const onEditUser = (row) => {
      userE.value.open({ ...row });
    };

    const onEditRole = (id) => {
      roleM.value.open(id);
    };

    const onEditUserPermis = (id:any)=>{
      userPermis.value.open(id);
    }

    const onEditProjectPermis = (id)=>{
      projectPermis.value.open(id)
    }

    const fetch = () => {
      table.value.fetch(keyword.value.trim());
    };

    return {
      keyword,
      onAddUser,
      userE,
      userA,
      roleM,
      onEditRole,
      onEditUser,
      onEditUserPermis,
      onEditProjectPermis,
      projectPermis,
      userPermis,
      table,
      fetch,
    };
  },
});
</script>
